<template>
  <div class="index">
    <mHeader></mHeader>
    <!--我加入的项目-->
    <div class="i-join">
      <i class="fa fa-cube"></i> 我加入的项目
    </div>
    <div class="project-wrapper">
      <!--项目卡片-->
      <el-card class="box-card" v-for="p in projectsData" :key="p.id">
        <!--卡片头部-->
        <div slot="header" class="card-header">
          <span v-html="p.name" @click="updateMembers(p.id)"></span>
          <div>
            <el-button type="text" @click="proDetial(p.id,p.name)">
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button type="text" @click="delProject(p.id)" v-if="isPM">
              <i class="el-icon-delete"></i>
            </el-button>
          </div>
        </div>
        <!--卡片logo-->
        <div class="logo" @click="previewApiDoc(p.id,p.name)">
          <!--<img src="../imgs/logo.png" alt="">-->
          <i class="iconfont">&#xe683;</i>
        </div>
        <!--卡片底部-->
        <div class="bottom" @click="updateMembers(p.id)">
          <el-tooltip content="项目组员" placement="bottom">
            <div class="member">
              <i class="iconfont">&#xe602;</i>
              {{p.count}}人
            </div>
          </el-tooltip>
          <el-tooltip placement="bottom">
            <div slot="content">
              最后更新时间 <br>{{formatDateTime(p.update_date)}}
            </div>
            <div class="updateDate">
              <i class="iconfont">&#xe698;</i>
              <span v-html="passedTime(formatDateTime(p.update_date))"></span>
            </div>
          </el-tooltip>
        </div>
      </el-card>
      <!--新增-->
      <el-card class="box-card add" v-if="isPM">
        <div class="add-icon" @click="addProjectDialog = true">
          <i class="iconfont">&#xe60a;</i>
        </div>
      </el-card>

    </div>
    <!--新建项目-->
    <el-dialog title="新建项目" :visible.sync="addProjectDialog" :closeOnClickModal="false">
      <el-form :model="project" :rules="rules" ref="addProjectForm">
        <el-form-item label="项目名称" label-width="120px">
          <el-input placeholder="请输入项目名称" v-model="project.name"></el-input>
        </el-form-item>
        <el-form-item label="项目描述" label-width="120px">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="请输入项目描述"
                    v-model="project.description">
          </el-input>
        </el-form-item>
        <el-form-item label="项目成员" label-width="120px">
          <el-select v-model="project.chooseMember" multiple filterable placeholder="请选择项目成员" style="width:100%">
            <el-option v-for="u in membersData" :key="u.id" :label="u.name" :value="u.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProjectDialog = false">取消</el-button>
        <el-button type="primary" @click="addProject">确定</el-button>
      </div>
    </el-dialog>

    <!--修改项目成员-->
    <el-dialog title="项目成员" :visible.sync="updateProjectDialog" :closeOnClickModal="false">
      <el-form>
        <el-form-item label="项目名称" label-width="120px">
          <el-input placeholder="请输入项目名称" v-model="project.name"></el-input>
        </el-form-item>
        <el-form-item label="项目成员" label-width="120px">
          <el-select v-model="project.chooseMember" value-key="id" multiple filterable placeholder="请选择项目成员"
                     style="width:100%">
            <el-option v-for="u in membersData" :key="u.id" :label="u.name" :value="u.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProjectDialog = false">取消</el-button>
        <el-button type="primary" @click="updateProject">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss">
  .index {
    padding-top: 60px;
  }

  .i-join {
    padding: 15px 20px 0 20px;
    font-size: 18px;
    i {
      font-size: 20px;
    }
  }

  .project-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 15px 20px;
    box-sizing: border-box;
    .box-card {
      width: 23%;
      height: 193px;
      box-sizing: border-box;
      margin: 15px 1%;
      transition: margin-top .3s, box-shadow .3s;
      &:hover {
        margin-top: 10px;
        box-shadow: 0 3px 12px 3px rgba(0, 0, 0, .1)
      }
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:first-child {
          cursor: pointer;
        }
      }
      .el-card__header {
        padding: 2px 20px;
      }
      .logo {
        display: flex;
        justify-content: center;
        margin: 15px 0;
        cursor: pointer;
        img {
          width: 52px;
          height: 52px;
        }
        i {
          font-size: 40px;
          color: #C0C4CC;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        font-size: 12px;
        color: #909399;
        .member, .updateDate {
          cursor: pointer;
        }
      }
      &.add {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: margin-top .3s, box-shadow .3s, background .3s;
        .el-card__body {
          width: 100%;
          height: 100%;
        }
        .add-icon {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &:hover {
          background: #f2f2f2;
        }
        i {
          font-size: 60px;
          font-weight: bold;
          color: #C0C4CC;
        }
      }
    }
    @media screen and (max-width: 1920px) {
      .box-card {
        width: 18%;
      }
    }
    @media screen and (max-width: 1400px) {
      .box-card {
        width: 23%;
      }
    }
    @media screen and (max-width: 1100px) {
      .box-card {
        width: 31.3%;
      }
    }
    @media screen and (max-width: 768px) {
      .box-card {
        width: 48%;
      }
    }
  }
</style>
<script>
  import mHeader from '../components/header.vue'
  import router from '../router'
  import http from '../api/http'
  import util from '../util'
  import store from '../util/store'

  export default {
    data() {
      return {
        isPM: store.get('pm'),
        projectsData: [],
        membersData: [], // 开发人员
        addProjectDialog: false,
        updateProjectDialog: false,
        project: {
          name: '',
          description: '',
          chooseMember: [], // 选中的开发人员
        },
        rules: {
          name: [
            {required: true, message: '请输入项目名', trigger: 'blur'},
          ]
        }
      }
    },
    components: {
      mHeader
    },
    mounted() {
      this.initData()
    },
    methods: {
      initData() {
        this.myProjects()
        this.getUsers()
      },
      // 我加入的项目
      myProjects() {
        if (!store.get('token')) {
          router.push('login')
          return
        }
        http.get('project/list').then(response => {
          this.projectsData = response.data
        })
      },
      getUsers() {
        http.get('user/list').then(response => {
          this.membersData = response.data
        })
      },
      delProject(id) {
        this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          http.get('project/del', {id: id}).then(response => {
            this.$message.success('删除成功')
            this.myProjects()
          })
        }).catch(() => {
          this.$message('已取消删除')
        });
      },
      // 添加项目
      addProject() {
        this.project.chooseMember.push(store.get('userId'))
        http.post('project/put', {
          userIds: this.project.chooseMember.toString(),
          ...this.project,
        }).then(response => {
          this.$message.success('添加成功')
          this.addProjectDialog = false
          this.project = {
            chooseMember: [],
          }
          this.initData()
        })
      },
      // 修改项目
      updateProject() {
        let userId = store.get('userId')
        if (!this.project.chooseMember.includes(userId)) {
          this.project.chooseMember.push(userId)
        }
        http.post('project/put', {
          userIds: this.project.chooseMember.toString(),
          ...this.project,
        }).then(response => {
          this.$message.success('修改成功')
          this.updateProjectDialog = false
          this.project = {
            chooseMember: [],
          }
          this.initData()
        })
      },
      // 修改项目成员
      updateMembers(projectId) {
        http.get('project/get', {id: projectId}).then(response => {
          this.project.name = response.data.name
          let strArray = response.data.userIds.split(',')
          this.project.chooseMember = strArray.map((value) => {
            return parseInt(value)
          })
          this.project.id = response.data.id
          this.updateProjectDialog = true
        })
      },
      // 编辑api文档
      proDetial(id, name) {
        store.set('projectName', name)
        store.set('projectId', id)
        router.push('proDetial')
      },
      // 预览api文档
      previewApiDoc(id, name) {
        store.set('projectName', name)
        store.set('projectId', id)
        router.push('preview')
      },
      formatDateTime(val) {
        return util.formatDateTime(val)
      },
      passedTime(val) {
        return util.passedTime(val)
      }
    }
  }
</script>
